import menu from "@/api/menu";
import dateChoose from "@/utils/datachoose";
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    // register the component
    components: {Treeselect},
    name: "index",
    created() {
        this.searchPage();

    },
    data() {
        return {
            searchForm: {
                currentPage: 1,
                pageSize: 5
            },

            rules: {
                parentId: [
                    {required: true, message: '父亲id不能为空', trigger: 'blur'},
                ],
                menuType: [
                    {required: true, message: '权限分类不能为空', trigger: 'blur'},
                ],

                menuIcon: [
                    {required: true, message: '图标不能为空', trigger: 'blur'},
                    {required: true, message: '图标不能为空', trigger: 'change'},
                ],
                menuTitle: [
                    {required: true, message: '权限名称不能为空', trigger: 'blur'}
                ],
                sort: [
                    {required: true, message: '排序不能为空', trigger: 'blur'}
                ],
                permSign: [
                    {required: true, message: '权限标识不能为空', trigger: 'blur'}
                ],
                menuRouter: [
                    {required: true, message: '路由地址不能为空', trigger: 'blur'}
                ],
                componentPath: [
                    {required: true, message: '组件地址不能为空', trigger: 'blur'}
                ],
                componentName: [
                    {required: true, message: '组件名称不能为空', trigger: 'blur'}
                ],


            },
            pickerOptions: dateChoose.pickerOptions,
            chooseDate: dateChoose.chooseDate,
            tableData: [],
            selectId: -1,
            total: 0,
            createDialog: false,
            formData: {
                parentId: 0,
                menuType: 1,
                sort: 1
            },
            menuSelectList: [
                {
                    id: 0,
                    menuTitle: "根目录",
                    children: []
                }
            ],
            normalizer(node) {
                return {
                    id: node.id,
                    label: node.menuTitle,
                    children: node.children,
                }
            },
            options: {
                FontAwesome: true,
                ElementUI: true,
                eIcon: true,//自带的图标，来自阿里妈妈
                eIconSymbol: true,//是否开启彩色图标
            }
        }
    },
    methods: {
        //增删改查操作
        async searchPage() {
            let response = await menu.searchPage(this.searchForm)
            this.total = response.total;
            this.tableData = response.data;

            this.menuSelectList[0].children = [];
            let allTreeData = await menu.getAllTreeData();
            this.menuSelectList[0].children = allTreeData;
            this.selectId = -1;
        },

        /**
         * 添加或者修改
         */
        addOrEdit() {
            //表单手动校验
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.createDialog = false;
                    if (this.formData.id) {
                        //修改
                        await menu.update(this.formData);
                    } else {
                        //添加
                        await menu.add(this.formData);
                    }
                    this.searchPage();
                } else {
                    this.$message.error("表单校验失败")
                    return false;
                }
            });


        },

        /*
        * findById
        * */
        async findById(id) {
            this.createDialog = true;
            this.formData = await menu.findById(id);


        },

        /*
        * 通过id删除
        *
        * */
        async deleteById(id) {
            await menu.deleteById(id);
            this.searchPage();
        },


        ////////////////////////页面的效果/////////////////////////////////////////
        /**
         * 点击分页回调函数
         */
        pageChange(page) {
            this.searchForm.currentPage = page;
            this.searchPage();
        },
        /**
         * 选择查询时间事件
         */
        chooseDateChange(val) {
            this.searchForm.startTime = val[0];
            this.searchForm.endTime = val[1];
        },
        /**
         * 搜索重置
         */
        resetSearchForm() {
            this.searchForm = {
                currentPage: 1,
                pageSize: 5
            };
            this.chooseDate = ""
        },

        /**
         * 设置添加按钮的点击事件
         */
        addBtnClick() {
            this.createDialog = true;
            this.formData = {
                parentId: 0,
                menuType: 1,
                sort: 1
            };
            this.$refs.form.resetFields();
        },
        /*
        * 点击批量删除
        * */
        showBatchDeleteDialog() {
            this.$confirm('你确定要删除id为' + this.selectId + "几个吗", '温馨提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                //点击确定
                await this.deleteById(this.selectId)
            })
        },

        /**
         * 点击某一行的事件
         */
        rowClick(row) {
            this.selectId = row.id
        }

    }
}
